<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ page import="com.thinkgem.jeesite.common.utils.PropertiesLoader" %>
<html>
<head>
	<title>车辆管理</title>
	<meta name="decorator" content="default"/>
	<!-- Vendor CSS-->
		<link href="${weiZe }/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="${weiZe }/assets/vendor/skycons/css/skycons.css" rel="stylesheet" />
		<link href="${weiZe }/assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<link href="${weiZe }/assets/vendor/css/pace.preloader.css" rel="stylesheet" />
		<!-- Plugins CSS-->
		<link href="${weiZe }/assets/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
		<link href="${weiZe }/assets/plugins/pnotify/css/pnotify.custom.css" rel="stylesheet" />					
		<!-- Theme CSS -->
		<link href="${weiZe }/assets/page/css/index/jquery.mmenu.css" rel="stylesheet " />
		<!-- Page CSS -->		
		<link href="${weiZe }/assets/page/css/index/index.css" rel="stylesheet" />
		<link href="${weiZe }/assets/page/css/index/add-ons.min.css" rel="stylesheet" />
		<!-- end: CSS file-->	
		<!-- Head Libs -->
		<script src="${weiZe }/assets/plugins/modernizr/js/modernizr.js"></script>
	    <script type="text/javascript">
		$(document).ready(function() {
			$(".close,.closeBtn").click(function(){
				$("#formDispach").addClass("hide");
			    $("#maskY").addClass("hide");
	        	$("#listData").html("");
	        });
		});
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        };
        /**
		* 车辆的详情
		* id 获取到的车辆id
	    */
		function car_detail(id){
	      	 $("#listData").html("");
	      	 $.ajax({
		        url:"${ctx}/tb_car_info/tbCarInfo/carDetails",
		        type: "post",
		        data:{
		        	id:id,
				},
				dataType:"json",
		        success: function(data) {		        	
	        		if(data!=null){
			        	for(var i=0;i<data.length;i++){
			        		var car = data[i];
			        		var carState = car.carState;
			        		var carGCode ="" ;
			        		var carcClass = "" ;
			        		var tbCertificateVehicles=car.tbCertificateVehicles;
			        		if(typeof(car.tbCarClass)!="undefined" && car.tbCarClass != null && car.tbCarClass != ''){
			        			var tbCarClass = car.tbCarClass;
			        			if(typeof(tbCarClass.name)!="undefined" && tbCarClass.name != null && tbCarClass.name != ''){
			        				carcClass = tbCarClass.name;
			        			}
			        		}
			        		if(typeof(car.carGCode)!="undefined"){
			        			carGCode = car.carGCode;
			        		}
			        		switch (carState) {
								case 0:
								carState = "【0】闲置";
								break;
								case 1:
								carState = "【1】运输";
								break;
								case 2:
								carState = "【2】停运";
								break;
							}
			        		var listStr ="<ul class='tanUl'>"+
				        			"<li><h4>车&nbsp&nbsp&nbsp辆&nbsp&nbsp&nbsp编&nbsp&nbsp&nbsp码："+car.carNum+"</h4></li>"+
				        			"<li><h4>车&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp牌&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号："+car.carCode+"</h4></li>"+
				        			"<li><h4>挂&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp车&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号："+carGCode+"<h4></li>"+
				        			"<li><h4>车&nbsp&nbsp&nbsp辆&nbsp&nbsp&nbsp类&nbsp&nbsp&nbsp型："+carcClass+"</h4></li>"+
				        			"<li><h4>运&nbsp&nbsp&nbsp输&nbsp&nbsp&nbsp状&nbsp&nbsp&nbsp态："+carState+"</h4></li>"+
				        			"<li><h4>承&nbsp&nbsp&nbsp载&nbsp&nbsp&nbsp重&nbsp&nbsp&nbsp量："+car.carWeight+"&nbsp&nbsp&nbsp吨</h4></li>"+
				        			"<li><h4>罐&nbsp&nbsp&nbsp体&nbsp&nbsp&nbsp容&nbsp&nbsp&nbsp积："+car.carVolumeoftank+"&nbsp&nbsp&nbspm³</h4></li>"+
				        			"<li><h4>车&nbsp&nbsp&nbsp仓&nbsp&nbsp&nbsp数&nbsp&nbsp&nbsp量："+car.carWarehouse+"</h4></li>"+
				        			"</ul>";
			        		$("#listData").append(listStr);
			        	}
			        }
		        }
		    });	
		    $(".tan").removeClass("hide");
		};
	</script>
		<style type="text/css">
		/*弹窗样式*/
		#maskY{
            background: #000;
            opacity: 0.75;
            /*IE兼容*/
            filter: alpha(opacity=75);
            height: 1000px;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            /*z-index: 1000;*/
          }
          #formDispach{
            position: fixed;
            left: 30%;
            top: 5%;
            /*z-index:1100;*/
          }
          .formCon{
            width: auto;
            height: auto;
            background: #FFF;
            position: relative;
          }
          #listData>ul{
			         list-style:none;
			         margin:0;
		  }
		  .tanUl>li{
			   margin-top: 10px;
			   padding-left:27%;
			   line-height:inherit;
			   text-align:left;
		  }
		  .closeBtn{
		  margin-left: 89%;
		  }
		  ul{
	        list-style: none;
	    }
	    .ul-form>li{
	        float: left;
	        margin-right: 15px;
	    }
	    .main {
		  	 		background: #ecedf0 none repeat scroll 0 0;
				    padding: 50px 37px 98px 83px;
				}
	</style>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/tb_car_info/tbCarInfo/">车辆列表</a></li>
		<shiro:hasPermission name="tb_car_info:tbCarInfo:edit"><li><a href="${ctx}/tb_car_info/tbCarInfo/form">车辆添加</a></li></shiro:hasPermission>
	</ul>
	<form:form id="searchForm" modelAttribute="tbCarInfo" action="${ctx}/tb_car_info/tbCarInfo/" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<ul class="ul-form">
			<li><label>车辆编码：</label>
				<form:input path="carNum" htmlEscape="false" maxlength="40" class="input-medium"/>
			</li>
			<li><label>车牌号：</label>
				<form:input path="carCode" htmlEscape="false" maxlength="15" class="input-medium"/>
			</li>
			<li><label>挂车号：</label>
				<form:input path="carGCode" htmlEscape="false" maxlength="15" class="input-medium"/>
			</li>
			<li><label>运输状态：</label>
				<form:input path="carState" htmlEscape="false" maxlength="2" class="input-medium"/>
			</li>
			<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
			<li class="clearfix"></li>
		</ul>
	</form:form>
	<sys:message content="${message}"/>
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th>车辆编码</th>
				<th>车牌号</th>
				<th>挂车号</th>
				<th>车辆类型</th>
				<th>运输状态</th>
				<th>承载重量</th>
				<th>车仓数量</th>
				<th>更新时间</th>
				<th>备注</th>
				<shiro:hasPermission name="tb_car_info:tbCarInfo:edit"><th>操作</th></shiro:hasPermission>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${page.list}" var="tbCarInfo">
			<tr>
				<td><a href="${ctx}/tb_car_info/tbCarInfo/form?id=${tbCarInfo.id}">
					${tbCarInfo.carNum}
				</a></td>
				<td>
					${tbCarInfo.carCode}
				</td>
				<td>
					${tbCarInfo.carGCode}
				</td>
				<td>
					<%-- ${fns:getDictLabel(tbCarInfo.carClass, '', '')} --%>
					${tbCarInfo.tbCarClass.name }
				</td>
				<td>
					${fns:getDictLabel(tbCarInfo.carState, 'car_run_state', '')}
					<%-- ${tbCarInfo.carState} --%>
				</td>
				<td>
					${tbCarInfo.carWeight}
				</td>
				<td>
					${tbCarInfo.carWarehouse}
				</td>
				<td>
					<fmt:formatDate value="${tbCarInfo.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
				</td>
				<td>
					${tbCarInfo.remarks}
				</td>
				<td>
				<shiro:hasPermission name="tb_car_info:tbCarInfo:edit">					
    				<a href="${ctx}/tb_car_info/tbCarInfo/form?id=${tbCarInfo.id}">修改</a>
					<a href="${ctx}/tb_car_info/tbCarInfo/delete?id=${tbCarInfo.id}" onclick="return confirmx('确认要删除该车辆吗？', this.href)">删除</a>
					<a href="javascript:void(0);" onclick="car_detail('${tbCarInfo.id}')">该车的信息</a>
				</shiro:hasPermission>
				</td>								
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
	<%--弹窗 --%>
		<div class="tan hide" id="maskY"></div>
		<section class="tan hide connectedSortable" id="formDispach" style="">
			<div class="formCon" style="">
			        <div class="input-group">
			          <div class="modal-dialog">
					  	 <div class="modal-content">
					          <div class="modal-header">
					            <button type="button" class="close" data-dismiss="modal" aria-label="Close"  >
					              <span aria-hidden="true">&times;</span></button>
					            <h4 class="modal-title">车辆详情</h4>
					          </div>
					          <section class="invoice" id="invoice_context">
					              <div id="listData"></div>
					          </section>          
					          <div class="modal-footer">
					            <button type="button" class="btn btn-default pull-left closeBtn" data-dismiss="modal" >取消</button>
					          </div>
					        </div>
				        </div>
		  			</div>
			</div>
  		</section>
  	<%--弹窗 end--%>
</body>
<!-- jQuery 2.2.3 -->
<script src="${adminLET }/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="${adminLET }/https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6 -->
<script src="${adminLET }/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="${adminLET }/https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="${adminLET }/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="${adminLET }/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="${adminLET }/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="${adminLET }/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="${adminLET }/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="${adminLET }/https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="${adminLET }/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="${adminLET }/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="${adminLET }/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="${adminLET }/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="${adminLET }/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${adminLET }/dist/js/app.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="${adminLET }/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="${adminLET }/dist/js/demo.js"></script>
<!-- Vendor JS-->				
		<script src="${weiZe }/assets/vendor/js/jquery.min.js"></script>
		<script src="${weiZe }/assets/vendor/js/jquery-2.1.1.min.js"></script>
		<script src="${weiZe }/assets/vendor/js/jquery-migrate-1.2.1.min.js"></script>
		<script src="${weiZe }/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="${weiZe }/assets/vendor/skycons/js/skycons.js"></script>	
		<script src="${weiZe }/assets/vendor/js/pace.min.js"></script>
		
		<!-- Plugins JS-->
		<script src="${weiZe }/assets/plugins/autosize/jquery.autosize.min.js"></script>
		<script src="${weiZe }/assets/plugins/jquery-validation/js/jquery.validate.js"></script>
		<script src="${weiZe }/assets/plugins/wizard/js/jquery.bootstrap.wizard.min.js"></script>
		<script src="${weiZe }/assets/plugins/pnotify/js/pnotify.custom.js"></script>	
		<script src="${weiZe }/assets/plugins/sparkline/js/jquery.sparkline.min.js"></script>
		
		<!-- Theme JS -->		
		<script src="${weiZe }/assets/js/jquery.mmenu.min.js"></script>
		<script src="${weiZe }/assets/js/core.min.js"></script>
		
		<!-- Pages JS -->
		<script src="${weiZe }/assets/page/js/newCarlist/newCarlist.js"></script>		
		<script src="${ctxStatic }/My97DatePicker/WdatePicker.js"></script>
</html>